import { reactive, ref, watch } from 'vue';

export default function usePaginationTable(tableData) {
  const displayTableData = ref([]);
  const pagination = reactive({
    page: 1,
    size: 10,
    total: 0,
  });

  watch(
    tableData,
    () => {
      pagination.total = tableData.value.length;
      getTable();
    },
    { immediate: true }
  );

  function getTable() {
    const startIndex = (pagination.page - 1) * pagination.size;
    displayTableData.value = tableData.value.slice(startIndex, startIndex + pagination.size);
  }

  return {
    pagination,
    displayTableData,
    getTable,
  };
}
